{% extends "shared/layout.volt" %}
{% block content %}
<h1 class="page-header">支付配置</h1>
    <div class="payment-form-box">
        <ul class="payment-select-step">
            <li class="current">
                <i class="fa fa-list-alt icon" aria-hidden="true"></i>
                <h6>STEP.1</h6>
                <h2>选择支付类型、支付接口类型和密钥类型</h2>
                <i class="fa fa-chevron-right arrow" aria-hidden="true"></i>
            </li>
            <li>
                <i class="fa fa-edit icon" aria-hidden="true"></i>
                <h6>STEP.2</h6>
                <h2>配置支付账号、证书和密钥</h2>
            </li>
        </ul>

    <div id="payment-platform-select">
    <div class="payment-platform-select">
        <div class="payment-select-box" id="payment-platform">
            <div class="payment-select-list">
                <ul>
                    <template v-for="payment in payment_platform_list">
                        <li><a href="javascript:;" @click="payment_data.payment_platform = payment.code;payment_data.payment_gateway = '';payment_data.encryption = '';" :class="payment_data.payment_platform == payment.code ?  'selected' : ''">${payment.name} <i class="fa fa-angle-double-right" aria-hidden="true"></i></a> </li>
                    </template>
                </ul>
            </div>
        </div>
        <div class="payment-select-box" id="payment-gateway">
            <div class="payment-select-list">
                <ul v-if="payment_data.payment_platform != ''">
                    <template v-for="gateway in payment_gateway_list[payment_data.payment_platform]">
                        <li><a href="javascript:;" @click="payment_data.payment_gateway = gateway.code;payment_data.encryption = '';" :class="payment_data.payment_gateway == gateway.code ?  'selected' : ''">${gateway.name} <i class="fa fa-angle-double-right" aria-hidden="true"></i></a> </li>
                    </template>
                </ul>
            </div>
        </div>
        <div class="payment-select-box" id="payment-encryption">
            <div class="payment-select-list">
                <ul v-if="payment_data.payment_gateway != ''">
                    <template v-for="encrypt in encryption_list[payment_data.payment_platform + '_' + payment_data.payment_gateway]">
                        <li><a href="javascript:;"  @click="payment_data.encryption = encrypt.code;" :class="payment_data.encryption == encrypt.code ?  'selected' : ''">${encrypt.name}</a> </li>
                    </template>
                </ul>
            </div>
        </div>
    </div>
    <div class="text-center">
        <form method="get">
            <input type="hidden" name="step" value="1">
            <input type="hidden" name="mch_id" value="{{ merchant_id }}">
            <input type="hidden" name="payment_platform" v-model="payment_data.payment_platform">
            <input type="hidden" name="payment_gateway" v-model="payment_data.payment_gateway">
            <input type="hidden" name="encryption" v-model="payment_data.encryption">
            <button  class="btn btn-success btn-sm" :disabled="payment_data.encryption == ''">下一步 配置接口信息</button>
        </form>
    </div>
    </div>
</div>
{% endblock %}
{% block footer %}
<script type="text/javascript">
    $(function () {
       $(".payment-select-box").on("click",'.payment-select-list a',function () {
          $(this).parents("ul").eq(0).find('a').removeClass('selected');
          $(this).addClass('selected');
       });

       new Vue({
           el : "#payment-platform-select",
           delimiters : ['${','}'],
           data : {
               payment_data : { "payment_platform":"","payment_gateway" : "" ,"encryption" : ""},
               payment_platform_list : {{ payment_platform_list }},
               payment_gateway_list : {{ payment_gateway_list }},
               encryption_list : {{ encryption_list }}
           },
           methods : {
               selectPlatform : function (id, e) {
                   $(event.currentTarget).parents("ul").eq(0).find('a').removeClass('selected');
                   $(event.currentTarget).addClass('selected');
                   this.payment_data.payment_gateway = '';
                   this.payment_data.payment_platform = id;
               },
               selectGateway : function (code, e) {
                   $(event.currentTarget).parents("ul").eq(0).find('a').removeClass('selected');
                   $(event.currentTarget).addClass('selected');
                   this.payment_data.payment_gateway = code;
               }
           }
       });
    });
</script>
{% endblock %}